<template>
  <div>
    <!-- 站位的放在上面下来刷新才能看到效果 -->
    <div class="kong"></div>

     <!-- 实现下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功" >

    <!-- 商品卡片区 -->
    <van-card
      :title="item.title.substr(0, 22)"
      :thumb="item.img_url"
      v-for="item in newsList"
      :key="item.id"
      @click="skipDetail(item.id)"
    >
      <template #bottom>
        <div class="time">发表时间：{{item.add_time.substr(0, 10)}}</div>
        <div class="touch">点击：{{item.click}}</div>
      </template>
    </van-card>

    <!-- 站位 使最后一个商品能够看到 -->
    <div class="bar" style="height: 50px"></div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 新闻资讯 信息列表
      newsList: [],
      // 下拉刷新绑定的数据
      isLoading: false
    }
  },
  created () {
    this.getNewsList()
  },
  methods: {
    async getNewsList () {
      const { data: res } = await this.$http.get('/api/getnewslist')
      // console.log(res)
      // 获取数据成功
      if (res.status === 1) { return this.$notify({ type: 'danger', message: '获取新闻资讯数据失败' }) }
      // 获取数据成功
      this.newsList = res.message
      // console.log(this.newsList)
    },

    // 监听每条新闻资讯的点击事件
    skipDetail (id) {
      const index = this.newsList.findIndex(item => item.id === id)
      console.log(index)
      this.newsList[index].click++
      // 路由跳转到详情页
      setTimeout(() => {
        this.$router.push('/news/detail/' + id)
      }, 1000)
    },

    // 下拉刷新
    onRefresh () {
      setTimeout(() => {
        this.isLoading = false
      }, 1000)
      // 请求列表数据
      this.getNewsList()
    }
  }
}
</script>

<style lang="less" scoped>
// 新闻列表样式
.van-card:not(:first-child) {
  margin-top: 0 !important;
}
.van-card {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  margin: 0 10px;
  padding: 8px;

  .van-card__header {
    height: 42px;
  }
  .van-card__content {
    min-height: 42px !important;
    overflow: hidden;
  }
  .van-card__thumb {
    width: 42px;
    height: 42px;
  }
  .van-card__title {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .van-card__bottom {
    color: #226aff;
    line-height: 30px;
  }
  .time {
    float: left;
  }
  .touch {
    float: right;
  }
}
.kong{
  height: 1.06667rem;
}
</style>
